<template>
  <div id="jackpot">  

    <div  style="display:flex;align-items: center;">
        <el-page-header @back="goBack"   content='' ></el-page-header>
        <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
        <div style="line-height: 40px;font-weight:bold:">奖池查询</div>
    </div> 

      <el-form ref="form"  label-width="80px"> 

        <div style="display:flex;align-items: center;">
            <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">查询项</div> 

             <el-form-item label="用户类别" >
                <el-select  v-model="form.select_num1" placeholder="请选择" style="width:140px;">
                    <el-option  v-for="(item,index) in select_data1" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
             </el-form-item>

           <el-form-item label="手机号码" style="margin-left:10px;">
                <el-input v-model="form.phone" placeholder="姓名/手机号" style="width:140px;"></el-input>
           </el-form-item>  

            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:10px;background:#FFC600;color:white;" @click="search_but1()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:10px;border:1px solid #D9D9D9;" @click="sx_but()">清 空</div>    
            </div> 
        </div>   

      
          
    </el-form>

   <!-- 渲染数据list -->
   <jackpot-list :datalist="datalist" @up_list_fun="list_fun"> </jackpot-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

   

    

      
  </div>
</template>

<script>
import JackpotList from '@/view/Activitynew/Egg/JackpotList'
export default {
  name: 'jackpot',
  data () {
    return {
        datalist:[{"name":"aaaa"}],
        page:1,
        count:0,
        form:{
            phone:'',
            select_num1:0,
        },
        select_data1:[{"id":0,"name":"用户"},{"id":1,"name":"推荐人"}],
       
    }
  },
 components:{
    JackpotList
  },
  created(){
      this.list_fun()
  },
  mounted (){
    
  },
  methods: {
    list_fun(){
        this.post("/draw_lottery/listOfMemberSurplus", {
              page:this.page,
              telOrName:this.form.phone,
              recommend:this.form.select_num1,
	         }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
            console.log(this.datalist)
          })
    },
    search_but1(){
       this.page = 1
      this.list_fun()

    },
    sx_but(){
        this.page = 1
        this.form={
            phone:'',
            select_num1:0,
        }
        this.list_fun()
    },
    goBack() {
        this.$router.go(-1)
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>

[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }
</style>
